.todo-stat-root {
  @include box(100%, 100%);
  padding: 10px 15px 20px 15px;

  .stat-global,
  .phared-details {
    @include themeShadow(0 0 5px #D7D7D7, 0 0 5px #000000);
    @include themeBg(#FAFAFA, #0F0F0F);
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 10px 0;

    .title {
      @include font(17px, 300);
      padding: 5px 10px;
      color: var(--bl-text-color);
    }

    .sub-title {
      @include font(12px, 300);
      padding: 0 15px;
      color: var(--bl-text-color-light);
    }
  }

  .stat-global {
    @include themeShadow(0 0 5px #D7D7D7, 0 0 5px #000000);
    @include themeBg(#FAFAFA, #0F0F0F);
    border-radius: 6px;
    margin-bottom: 20px;

    .chart-line-completed {
      @include box(100%, 230px);
    }

    .item-row {
      padding: 10px;

      &>div:first-child {
        margin-left: 10px;
      }

      &>div:last-child {
        margin-right: 10px;
      }

      .stat-item {
        width: 150px;
        height: 80px;
        color: var(--bl-text-color);
        border-radius: 6px;
        padding: 10px 15px;
        position: relative;
        overflow: hidden;

        &:hover {
          .icon-shadow {
            transform: scale(1.4);
          }
        }

        .label {
          @include font(17px, 300);
          padding-bottom: 10px;
        }

        .value {
          @include font(24px, 500);
          position: relative;
          padding-left: 15px;
          line-height: 20px;

          &::before {
            content: "";
            @include box(6px, 100%);
            @include absolute('', '', '', 0px);
            display: block;
            background-color: #000000;
            border-radius: 4px;
            filter: blur(1px);
          }
        }

        .icon-shadow {
          @include font(60px, 500);
          @include absolute(5px, 5px, '', '');
          z-index: 1;
          filter: blur(3px);
          transition: all 0.3s;
        }
      }


      .stat-item.waiting {
        background-color: #FE63702D;

        .value {
          &::before {
            background-color: #FF626F;
          }
        }

        .icon-shadow {
          @include themeColor(#FF8590, #BC454F);
        }
      }

      .stat-item.progress {
        background-color: #FBA85F2D;

        .value {
          &::before {
            background-color: #FBA85F;
          }
        }

        .icon-shadow {
          @include themeColor(#F9AC69, #BA804E);
        }
      }

      .stat-item.completed {
        background-color: #9974FE2D;

        .value {
          &::before {
            background-color: #8E65FF;
          }
        }

        .icon-shadow {
          @include themeColor(#9777EE, #7251CC);
        }
      }

      .stat-item.total {
        background-color: #6289FF2D;

        .value {
          &::before {
            background-color: #7896EE;
          }
        }

        .icon-shadow {
          @include themeColor(#7896EE, #3C5AB3);
        }
      }
    }
  }

  .phared-details {

    .row {
      @include font(12px, 300);
      padding: 5px 15px 0 15px;
      color: var(--bl-text-color);
    }
  }
}